<template>
  <div class="flex items-center">
    <div
      class="w-2 h-2 mr-2 flex-none rounded-full border"
      :class="[dotBgColor, dotBdColor]"
      :style="{
        'background-color': hollow ? '#fff' : color,
        'border-color': color,
        width: size + 'px',
        height: size + 'px'
      }"
    ></div>
    <div :class="textColor" :style="{ color }">
      <slot>{{ label }}</slot>
    </div>
  </div>
</template>

<script>
/**
 * 圆圈状态
 */
const BG_CLASS_MAP = {
  success: "bg-success",
  info: "bg-info",
  warning: "bg-warning",
  danger: "bg-danger"
};

const BORDER_CLASS_MAP = {
  success: "border-success",
  info: "border-info",
  warning: "border-warning",
  danger: "border-danger"
};

const TEXT_CLASS_MAP = {
  success: "text-success",
  info: "text-info",
  warning: "text-warning",
  danger: "text-danger"
};

export default {
  props: {
    label: String,
    status: {
      type: String,
      default: "info"
    },
    // 指定颜色
    color: {
      type: String
    },
    // dot的大小，单位为px
    size: {
      type: Number
    },
    // dot是否为空心
    hollow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dotBgColor() {
      if (this.hollow) return "bg-white";
      return BG_CLASS_MAP[this.status];
    },
    dotBdColor() {
      return BORDER_CLASS_MAP[this.status];
    },
    textColor() {
      return TEXT_CLASS_MAP[this.status];
    }
  }
};
</script>
